<template>
  <div class="nodeIconToolbar" ref="nodeIconToolbar" :style="style" @click.stop.passive v-show="showNodeIconToolbar">
    <div class="iconListBox">
      <div
        class="icon"
        v-for="icon in iconList"
        :key="icon.name"
        v-html="getHtml(icon.icon)"
        :class="{
          selected: nodeIconList.includes(iconType + '_' + icon.name)
        }"
        @click="setIcon(icon.name)"
      />
    </div>
    <div class="btnBox">
      <span class="btn iconfont-chaojizhiku iconshanchu" @click="deleteIcon" />
    </div>
  </div>
</template>

<script>
import { nodeIconList as _nodeIconList } from "simple-mind-map/src/svg/icons"
import icon from "../../../config/icon"

const allIconList = [..._nodeIconList, ...icon]

export default {
  name: "NodeIconToolbar",
  components: {},
  props: {
    mindMap: {
      type: Object
    }
  },
  data() {
    return {
      showNodeIconToolbar: false,
      style: {
        left: 0,
        top: 0
      },
      node: null,
      iconType: "",
      iconName: "",
      nodeIconList: [],
      iconList: []
    }
  },
  computed: {
    // ...mapState(["activeSidebar"])
  },
  created() {
    this.$bus.$on("node_icon_click", this.show)
    this.$bus.$on("draw_click", this.close)
    this.$bus.$on("svg_mousedown", this.close)
    this.$bus.$on("node_dblclick", this.close)
    this.$bus.$on("node_active", this.onNodeActive)
    this.$bus.$on("scale", this.onScale)
    this.$bus.$on("close_node_icon_toolbar", this.close)
  },
  mounted() {
    document.body.append(this.$refs.nodeIconToolbar)
  },
  beforeUnmount() {
    this.$bus.$off("node_icon_click", this.show)
    this.$bus.$off("draw_click", this.close)
    this.$bus.$off("svg_mousedown", this.close)
    this.$bus.$off("node_dblclick", this.close)
    this.$bus.$off("node_active", this.onNodeActive)
    this.$bus.$off("scale", this.onScale)
    this.$bus.$off("close_node_icon_toolbar", this.close)
  },
  methods: {
    show(node, icon) {
      this.node = node
      this.iconType = icon.split("_")[0]
      this.iconName = icon.split("_")[1]
      this.nodeIconList = node.getData("icon") || []
      this.iconList = [
        ...allIconList.find((item) => {
          return item.type === this.iconType
        }).list
      ]
      this.updatePos()
      this.showNodeIconToolbar = true
      //   if (this.activeSidebar === "nodeIconSidebar") {
      //     this.setActiveSidebar("")
      //   }
    },

    close() {
      this.showNodeIconToolbar = false
      this.node = null
      this.iconType = ""
      this.iconName = ""
      this.nodeIconList = []
      this.iconList = []
      this.style.left = 0
      this.style.top = 0
    },

    updatePos() {
      if (!this.node) return
      const rect = this.node.getRect()
      this.style.left = rect.x + "px"
      this.style.top = rect.y + rect.height + "px"
    },

    onScale() {
      this.updatePos()
    },

    onNodeActive(node) {
      if (node === this.node) {
        return
      }
      this.close()
    },

    deleteIcon() {
      this.setIcon(this.iconName)
      this.close()
    },

    // 获取图标渲染方式
    getHtml(icon) {
      return /^<svg/.test(icon) ? icon : `<img src="${icon}" />`
    },

    // 设置icon
    setIcon(name) {
      const key = this.iconType + "_" + name
      const index = this.nodeIconList.findIndex((item) => {
        return item === key
      })
      // 删除icon
      if (index !== -1) {
        this.nodeIconList.splice(index, 1)
      } else {
        const typeIndex = this.nodeIconList.findIndex((item) => {
          return item.split("_")[0] === this.iconType
        })
        // 替换icon
        if (typeIndex !== -1) {
          this.nodeIconList.splice(typeIndex, 1, key)
          this.iconName = name
        } else {
          // 增加icon
          this.nodeIconList.push(key)
        }
      }
      this.node.setIcon([...this.nodeIconList])
    }
  }
}
</script>

<style lang="less" scoped>
.nodeIconToolbar {
  position: fixed;
  z-index: 2000;
  width: 210px;
  max-height: 170px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .iconListBox {
    width: 100%;
    height: 180px;
    overflow-y: auto;
    padding: 10px;

    .icon {
      width: 24px;
      height: 24px;
      margin: 5px;
      cursor: pointer;
      position: relative;
      float: left;

      /deep/ img {
        width: 100%;
        height: 100%;
      }

      /deep/ svg {
        width: 100%;
        height: 100%;
      }

      &.selected {
        &::after {
          content: "";
          position: absolute;
          left: -4px;
          top: -4px;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          border: 2px solid #409eff;
        }
      }
    }
  }

  .btnBox {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #eee;
    flex-shrink: 0;

    .btn {
      cursor: pointer;
      color: rgba(26, 26, 26, 0.8);
    }
  }
}
</style>
